<template>
  <div class="home">

    <div class="tab-base">
      <van-button round type="info" v-for="(item, idx) in dateTypes" :key="idx" @click="handleBtnClick(item.type)">{{
        item.name }}</van-button>
    </div>
    <DatePopup :config="dateConfig" :showDateTypeBar="false" :show.sync="show" @confirm="handleDateTooConfirm" />
  </div>
</template>

<script>
import DatePopup from "@/components/common/DatePopup.vue"

export default {
  name: 'HomeView',
  components: {
    DatePopup
  },
  data() {
    return {
      show: false,
      dateConfig: {
        d: 1, w: 0, m: 0, y: 0, defDateType: "d"
      },

      dateTypes: [
        {
          name: "日",
          type: "d",
        },
        {
          name: "周",
          type: "w",
        },
        {
          name: "月",
          type: "m",
        },
        {
          name: "年",
          type: "y",
        }
      ]
    }
  },

  methods: {
    handleBtnClick(type) {
      // console.log('type', type)

      // 已修改DateTools，支持动态改defDateType
      this.dateConfig.defDateType = type

      this.show = true

    },

    handleDateTooConfirm(info) {
      console.log('info', info)
    }
  }
}
</script>

<style lang="scss" scoped>
.tab-base {
  margin-top: 100px;
  display: flex;

  .van-button {
    min-width: 60px;
  }
}
</style>
